<template>
  <div class="home_event">
    <div class="card_list_box game_list_box" v-if="swiperList.length > 0">
      <ul class="card_title" v-if="props.type">
        <li class="title_left">
          <ImgT src="/imgs/home/saishi.webp" :key="'saishi'" alt="" />
          <span>{{ t('home_page_event') }}</span>
        </li>
        <li class="title_right">
          <p class="more" @click="goToMore">
            {{ t('home_page_more') }}
          </p>
          <div class="swiper-btn swiper_pre2" :class="{ disabled: isEventBeginning || swiperList.length === 0 }"
            @click="otherHandlePrev(eventRef, 'event')">
            <iconpark-icon name="zuo-keyong" size="24" />
          </div>
          <div class="swiper-btn swiper_next2" :class="{ disabled: isEventEnd || swiperList.length === 0 }"
            @click="otherHandleNext(eventRef, 'event')">
            <iconpark-icon name="you-keyong" size="24" />

          </div>
        </li>
      </ul>
      <div class="event_box">
        <swiper direction="horizontal" :modules="modules" :navigation="{
          prevEl: '.swiper_pre2',
          nextEl: 'swiper_next2'
        }" @swiper="(e: any) => { eventRef = e; updateSwiperStatus('event'); }"
          @slideChange="updateSwiperStatus('event')" :autoplay="false" :loop="false" :delay="3000"
          :disableOnIntercation="false" slidesPerView="auto" :spaceBetween="5 - 8" :centeredSlides="true">
          <swiper-slide v-for="(item, key) in swiperList" :key="key" class="custom_slide">
            <div class="events_swiper">
              <img w-full h-full :src="joinURL(settings.backend_upload, item.tournm_logo)" fit="cover" />
              <ul class="event_box_btn">
                <li class="time_box">
                  <iconpark-icon name="time" size="18" />
                  <span>
                    {{ t("home_page_event_date", {
                      year: item.begin_time.year,
                      month: item.begin_time.month,
                      day: item.begin_time.day,
                      hour: item.begin_time.hour,
                    }) }}
                  </span>
                </li>
                <li class="join_box" @click="goEnterName(item)">{{ t('home_page_sign_up') }}</li>
              </ul>
            </div>

          </swiper-slide>
        </swiper>

      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, nextTick, watch, onBeforeMount, onUnmounted } from 'vue';
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { joinURL } from '@/utils/publicMethods'

import { i18n } from '@/languages';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/pagination'
import { useRouter } from "vue-router";

import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from '@/netBase/NetPacket';

import { Page } from '@/store/page';
const { t } = useI18n();
const router = useRouter();
const {
  lang,
  settings,
} = storeToRefs(Page(pinia));


const props: any = defineProps({
  type: {
    type: Boolean,
    default: false, // 设置默认值
  },
});

const eventRef = ref() // 赛事
const swiperList: any = ref([]);
const isEventBeginning = ref(true)
const isEventEnd = ref(false)

const otherHandlePrev = (item: any, type: string) => {
  if (type === 'event' && !isEventBeginning.value && swiperList.value.length > 0) {
    item.slidePrev();
    updateSwiperStatus(type);
  }
}
const otherHandleNext = (item: any, type: string) => {
  if (type === 'event' && !isEventEnd.value && swiperList.value.length > 0) {
    item.slideNext();
    updateSwiperStatus(type);
  }
}
const updateSwiperStatus = (type: string) => {
  nextTick(() => {
    const swiper = type === 'event' ? eventRef.value : '';
    if (swiper) {
      if (type === 'event') {
        isEventBeginning.value = swiper.isBeginning;
        isEventEnd.value = swiper.isEnd;
      }
    }
  });
};

const goToMore = () => {
  router.push({
    path: "/club/tournamentList",
  });
}

const goEnterName = (item: any) => {
  router.push({
    path: "/club/eventDetails",
    query: {
      roomId: item.room_id,
    },
  });
}

watch(swiperList, () => {
  if (eventRef.value) {
    updateSwiperStatus('event');
  }
});

const modules = [Autoplay, Pagination];

const getEventsList = () => {
  // 获取赛事列表
  const eventsList = NetPacket.req_tournament_events_list();
  eventsList.game_type = 0
  eventsList.page = 6
  PKwebsocket.instance.send(eventsList, true, {
    callbackName: 'msg_notify_tournament_events_list',
    callback: handleEventsList
  })
}

const handleEventsList = async (res: any) => {
  swiperList.value = res.tournm_list;
};

onBeforeMount(async () => {
  i18n.global.locale.value = lang.value
  // await getEventsList() 报错了 先注释
  console.error('这里注释了个接口', getEventsList)
})

onUnmounted(() => {

})
</script>

<style lang="scss" scoped>
.home_event {

  .card_list_box {
    padding-left: 14px;

    .card_title {
      display: flex;
      padding: 0 14px 0 0;
      justify-content: space-between;
      align-items: center;
      height: 24px;
      line-height: 24px;
      margin: 12px 0;

      .title_left {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        text-align: left;
        color: #FCFFFA;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
          width: 18px;
          height: 18px;
          margin-right: 5px;
        }
      }

      .title_right {
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 500;
        color: #C6C4F5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 24px;

        .more {
          background: #282747;
          line-height: 24px;
          padding: 0px 6px;
          border-radius: 6px;
          box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
        }

        .swiper-btn {
          position: relative;
          top: 4px;
          margin-left: 8px;
        }

        .disabled {
          pointer-events: none;
          opacity: 0.5;
          cursor: not-allowed;
        }
      }
    }


  }

  // 赛事轮播图
  .event_box {
    // height: 280px;

    :deep(.swiper-backface-hidden .swiper-slide) {
      width: 320px;
      height: 300px;
      border-radius: 8px;
      background: linear-gradient(180deg, #0D0523 51.91%, #2B155D 100%);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }


    .swiper-slide-prev,
    .swiper-slide-next {
      transform: scale(0.92);
    }

    .swiper-slide-active {
      transform: scale(1);
    }

    .event_box_btn {
      height: 100%;
      padding: 0 14px;
      border-radius: 8px;
      margin-top: 23.19px;

      li {

        height: 44px;
        color: #FFFFFF;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        border-radius: 8px;
        // position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .time_box {
        background: #3A2960;
        margin-bottom: 12px;
      }

      .join_box {
        background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
        bottom: 18px;

      }

    }
  }

  .events_swiper {
    >img {
      width: 320px;
      height: 148px;
      border-radius: 8px;
    }
  }
}
</style>
